<!-- 详情 -->
<template>
  <div class="drawer-layout">
    <el-drawer :title="title" :visible.sync="drawer" @closed="closeCurrentDrawer" size="65%" :wrapperClosable="false">
      <div class="layout" style="position: relative">
        <el-form ref="form" label-position="left" :inline="true" :model="form" size="small" :rules="formrules">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="first">
              <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="行业名称" prop="name" class="form-box-item">
                    <el-input clearable maxlength="20" show-word-limit placeholder="请输入行业名称"
                      v-model="form.name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="所需保证金" prop="security_deposit" class="form-box-item">
                    <el-input clearable show-word-limit placeholder="请输入所需保证金" onkeyup="value=value.replace(/\D/g,'')"
                      v-model="form.security_deposit"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="textareabox">
                  <el-form-item label="行业说明" prop="lnstructions" class="form-box-item" style="width: 100%;">
                    <el-input style="width: 100%;" type="textarea" :rows="4" placeholder="请输入行业说明"
                      v-model="form.lnstructions"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="textareabox">
                  <el-form-item label="行业备注" prop="remark" class="form-box-item">
                    <el-input type="textarea" :rows="4" placeholder="请输入行业备注" v-model="form.remark"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="button-box">
                <el-button type="primary" @click="activeName = 'second'" class="next-button">下一步 <i
                    class="el-icon-caret-right el-icon--right"></i></el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="行业类型要求" name="second">
              <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <el-form-item prop="demand" class="form-box-item">
                    <editor-text v-model="form.demand" :height="250" @input="editorclick" />
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="button-box">
                <el-button type="primary" @click="save_industry" :loading="loading" class="next-button"
                  style="width: 80px;">保存</el-button>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script>
  import {
    addCateList,
    getCatedDetail,
    editCateList
  } from "@/api/merchant/index";
  export default {
    name: "detail",
    props: [
      "title",
      "industryId"
    ],
    data() {
      return {
        loading: false,
        drawer: true,
        activeName: "first",
        form: {
          name: '', //名字
          security_deposit: '', //保证金
          lnstructions: '', //说明
          remark: '', //备注
          demand: '', //店铺类型要求
        },
        formrules: {
          name: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入行业名称"));
              }
              callback();
            },
            trigger: "change",
          }, ],
          security_deposit: [{
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                callback(new Error("请填写保证金"));
              } else {
                let req = /^\d+(\.\d{1,2})?$/;
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          }, ],
          lnstructions: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入说明"));
              }
              callback();
            },
            trigger: "blur",
          }, ],
          remark: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入备注"));
              }
              callback();
            },
            trigger: "blur",
          }, ],
          demand: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请输入店铺类型要求"));
              }
              callback();
            },
            trigger: "blur",
          }, ],
        },
      };
    },
    watch: {

    },
    mounted() {
      this.display_form()
    },
    methods: {
      //编辑
      display_form() {
        if(!this.industryId){
          return
        }
        getCatedDetail({
            id: this.industryId
          })
          .then((res) => {
            if (res.code !== 200) {
              this.$messages.error(res.msg);
              return;
            }
            this.form = res.data
            console.log(res.data)
          })
          .catch(() => {
          });
      },
      //添加
      save_industry() {
        this.$refs.form.validate((valid, err) => {
          if (valid) {
            this.loading = true;
            if (this.industryId) {
              this.form.id = this.industryId
              editCateList(this.form)
                .then((res) => {
                  this.loading = false;
                  if (res.code !== 200) {
                    this.$messages.error(res.msg);
                    return;
                  }
                  this.$messages.success(res.msg);
                  this.$parent.closeDrawer();
                })
                .catch(() => {
                  this.loading = false;
                });


            } else {
              addCateList(this.form)
                .then((res) => {
                  this.loading = false;
                  if (res.code !== 200) {
                    this.$messages.error(res.msg);
                    return;
                  }
                  this.$parent.closeDrawer();
                })
                .catch(() => {
                  this.loading = false;
                });
            }
          } else {
            this.activeName = "first";
            this.$messages.error('请补全商户行业信息');
            return false;
          }

        });

      },
      // 关闭当前抽屉
      closeCurrentDrawer() {
        this.$parent.closeDrawer();
      },
      editorclick(e) {
        this.form.demand = e;
      },

    },
  };
</script>
<style lang="scss">
  .drawer-layout {

    /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
    // .el-drawer__body {
    //     overflow: auto;
    // }

    /*2.隐藏滚动条，太丑了*/
    .el-drawer__container ::-webkit-scrollbar {
      display: none;
    }

    .el-drawer__header {
      background-color: #409eff;
      color: #ffffff;
      padding: 10px 20px;
      margin-bottom: 10px;
    }

    .textareabox {
      .form-box-item {
        width: 100%;
        display: flex;

        .el-form-item__content {
          width: 100%;
          flex: 1;
        }
      }

    }

    // .el-alert--warning.is-light .el-alert__description {
    //     color: #c77b04;
    //     font-size: 14px;
    // }

    // .form-box-item {
    //     .el-form-item__label {
    //         font-size: 14px;
    //         font-weight: 500;
    //         // width: 96px;
    //     }

    //     .el-input {
    //         width: 250px;
    //     }
    // }
  }
</style>
<style lang="scss" scoped>
  .layout {
    padding: 10px 20px;

    // 筛选样式
    .searchForm {
      display: flex;

      .SearchBtn {
        display: flex;
        justify-content: flex-end;
      }
    }

    // 筛选超出隐藏
    .overoverflow-hidden {
      height: 50px;
      overflow: hidden;

    }
  }



  .blockquote-box {
    border-left: 4px solid #409eff;
    padding-left: 16px;
    margin: 16px 0;
    height: 40px;
    line-height: 40px;
    background: #fafafa;
    font-size: 16px;
  }

  .form-box {
    margin: 0 20px;

    .form-box-item {
      padding-bottom: 10px;
      padding-right: 20px;
      font-size: 12px;
      color: #4c4c4c;

      .form-tip {
        font-size: 12px;
        color: #4c4c4c;

        .tip-key {
          font-weight: bold;
          text-decoration: underline;
        }
      }

      .form-product {
        display: flex;
        font-size: 12px;
        color: #ee3737;
      }

      .Instructions {
        background: #f6f6f6;
        border-radius: 4px;
        padding: 10px;
      }
    }

    .table-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;

      .table-top-left {
        display: flex;

        div {
          margin-right: 20px;
        }
      }

      .table-top-right {
        display: flex;

        div {
          margin-left: 20px;
        }
      }
    }

    .table-num {
      margin-left: 5px;
      background: #f0f0f0;
      width: 35px;
      border-radius: 5px;
    }
  }

  .button-box {
    margin-left: 30px;
    margin-bottom: 20px;
    text-align: center;

    .next-button {
      // background-color: #409eff;
      // color: #4c4c4c;
      height: 30px;
    }
  }
</style>
